// 书写 打包配置文件(gulpfile.js)

/* 
    此笔记中
    src：源文件的文件夹
    dist：打包后生成的文件夹
*/


// -1. 导入第三方模块：gulp(项目)
const gulp = require('gulp')
/* 
    注意：
    后续代码中，第三方模块的下载
    命令行指令 npm install --save-dev 包名
    简写 npm i -D 包名
*/


// 0. gulp 的通用方法

// 0-1. src 地址
// + 语法：gulp.src('需要打包的文件，在 src 中的地址')

// 0-2. 进行下一步
// + 语法：gulp.pipe(方法)

// 0-3. dist 地址
// + 语法：gulp.dest('打包好的文件，存放在 dist 中的地址')


// 1. 书写 打包 css 文件，的任务函数

// 1-0. 导入第三方模块
// + gulp-autoprefixer, 用于自动添加 css代码 的兼容前缀
const autoprefixer = require('gulp-autoprefixer')

// + gulp-cssmin, 用于压缩 css文件
const cssmin = require('gulp-cssmin')

const cssHandler = () => {
    return gulp
        .src('./src/css/*.css')

        // 1-1. 添加 css代码 的兼容前缀
        .pipe(autoprefixer())
        // 1-2. 压缩 css文件
        .pipe(cssmin())
        
        .pipe(gulp.dest('./dist/css/'))
        
}


// 2. 书写 打包 sass 文件，的任务函数

// 2-0. 导入第三方模块
// + sass, 用于支持 gulp-sass
// + gulp-sass, 用于 sass文件 转码 css文件
// const sass = require('gulp-sass')(require('sass'))

// const sassHandler = () => {
//     return gulp
//         .src('需要打包的 sass文件，在 src 中的地址')

//         // 2-1. sass文件 转码 css文件
//         .pipe(sass())
//         // 2-2. 添加 css代码 的兼容前缀
//         .pipe(autoprefixer())
//         // 2-3. 压缩 css文件
//         .pipe(cssmin())

//         .pipe(gulp.dest('打包好的 sass文件，存放在 dist 中的地址'))
// }


// 3. 书写 打包 js文件，的任务函数

// 3-0. 导入第三方模块
// + @babel/core, 用于支持 gulp-babel
// + @babel/preset-env, 用于支持 gulp-babel
// + gulp-babel, 用于 es6 转换成 es5
const babel = require('gulp-babel')

// + gulp-uglify, 用于压缩 js文件
const uglify = require('gulp-uglify')

const jsHandler = () => {
    return gulp
        .src('./src/js/*.js')

        // 3-1. es6 转换成 es5
        .pipe(babel({ presets: [ '@babel/preset-env' ] }))
        // 3-2. 压缩 js文件
        .pipe(uglify())

        .pipe(gulp.dest('./dist/js/'))
}


// 4. 书写 打包 html文件，的任务函数

// 4-0. 导入第三方模块
// + gulp-file-include, 用于 html组件 和 需要打包的html文件 的组装
const fileInclude = require('gulp-file-include')

// + gulp-htmlmin, 用于压缩 html文件 
const htmlmin = require('gulp-htmlmin')

const htmlHandler = () => {
    return gulp
        .src('./src/htmls/*.html')
        
        // 4-1. html组件 和 需要打包的html文件 的组装
        // .pipe(fileInclude({
        //     basepath: 'html组件，在 src 中的地址',
        //     prefix: '自定义标识符，用于 组装 过程'
        // }))
        // 4-2. 压缩 html文件 
        .pipe(htmlmin({
            collapseWhitespace: true, // 删除空白
            collapseBooleanAttributes: true, // 去除布尔类型属性
            removeAttributeQuotes: true, // 移除双引号
            removeComments: true, // 移除注释
            removeEmptyAttributes: true, // 移除空属性
            removeScriptTypeAttributes: true, // 移除 script 标签的默认 type 属性
            removeStyleLinkTypeAttributes: true, // 移除 style 和 link 标签的 type 属性
            minifyCSS: true, // 压缩内嵌式 css 代码
            minifyJS: true, // 压缩内嵌式 js 代码            
        }))
        .pipe(gulp.dest('./dist/htmls'))
}


// 5. 书写 打包 图片文件，的任务函数

// 5-0. 导入第三方模块
// + gulp-imagemin, 用于压缩 图片文件
// const imagemin = require('gulp-imagemin')

// const imgHandler = () => {
//     return gulp
//         .src('需要打包的 图片文件，在 src 中的地址')

//         // 5-1. 压缩 图片文件
//         .pipe(imagemin())

//         .pipe(gulp.dest('打包好的 图片文件，存放在 dist 中的地址'))
// }


// 6. 书写 转移 若干文件，的任务函数
// src 中有些文件不需要打包，直接转移到 dist 中即可
// 比如 audio、video、font ... ...

// const videoHandler = () => {
//     return gulp 
//         .src('需要转移的 video文件，在 src 中的地址')
//         .pipe(gulp.dest('转移好的 video文件，存放在 dist 中的地址'))
// }

// const audioHandler = () => {
//     return gulp 
//         .src('需要转移的 audio文件，在 src 中的地址')
//         .pipe(gulp.dest('转移好的 audio文件，存放在 dist 中的地址'))
// }

// const fontHandler = () => {
//     return gulp 
//         .src('需要转移的 font文件，在 src 中的地址')
//         .pipe(gulp.dest('转移好的 font文件，存放在 dist 中的地址'))
// }


// 7. 空过去


// 8. 书写一个 删除，的任务函数
// 作用：每次完整打包之前，删除一次 dist，保证永远是按照当前 src 进行打包

// 8-0. 导入第三方模块
// + del, 用于删除文件
// const del = require('del')

// const delHandler = () => {
//     return del([ '被删除的 dist 的地址' ])
// }


// 9. 配置一个开启服务器，的任务函数
// 作用：开发过程中使用的，开启一个服务器，实时显示你的页面

// 9-0. 导入第三方模块
// + gulp-webserver, 用于开启服务器
// const server = require('gulp-webserver')

// const serverHandler = () => {
//     return gulp
//         .src('dist 的地址')

//         // 9-1. 开启服务器
//         .pipe(server({
//             host: 'localhost 或者 127.0.0.1',
//             port: '自定义端口号',
//             open: '默认打开 src 中的 html文件 的地址',
//             livereload: true,       // 自动刷新页面
//             proxies: [ 
//                 {
//                     source: '自定义代理标识符',
//                     target: '代理的目标地址'
//                 }
//             ]
//         }))    
// }


// 10. 配置一个监控，的任务函数
// 作用：src 内的代码一旦改变，实时重新 打包，放入 dist
// const watchHandler = () => {
//     gulp.watch('src 中，需要重新打包的 文件，的地址', 对应的任务函数名)
// }


// end. 创建一个默认，任务函数
// 作用：统一分配上述 任务函数 的执行顺序

// + 任务函数 同时执行
// 语法：gulp.parallel(任务1, 任务2, 任务3, ... ...)

// + 任务函数 逐个执行
// 语法：gulp.series(任务1, 任务2, 任务3, ... ...)

const _default = gulp.series(
    // delHandler,
    gulp.parallel(cssHandler, htmlHandler, jsHandler)
    // serverHandler,
    // watchHandler
)


// end+1. 将当前文件内书写好的 任务函数 进行导出
module.exports = {
    cssHandler,

    jsHandler,
    htmlHandler,

    default: _default
}



/* 写完上述代码，在命令行内，进行打包操作：
    + 打开命令行, 切换目录到 gulpfile.js 文件所在的目录(项目根目录)
    + 输入指令: gulp default
        => 可以简写成 gulp
        => 也可以写某一个 任务函数的函数名
    + 就会利用全局 gulp 工具去执行该任务 
  */